<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

    <style>
        *{
            margin:0;
            padding:0;
        }
        .banner{
            width: 1226px;
            height: 460px;
            margin:50px auto;  

            position: relative;
        }

        img{
            width:100%;
            height:100%;
        }

        .pre,.next{
            width: 41px;
            height: 60px;
            background-color: aqua;
         
            position: absolute;

            cursor: pointer;
        }
        .pre{
            top:50%;
            transform: translateY(-50%);
        }
        .next{
            right: 0;
            top:50%;
            transform: translateY(-50%);
        }
        li{
            list-style: none;
            width:15px;
            height:15px;
            border: 1px solid black;
            margin-right: 30px;
            border-radius: 50%;
            float: left;

            cursor: pointer;
        }

        .active{
            background-color: aliceblue;
        }

        ul{
            position: absolute;
            right:110px;
            bottom: 50px;
        }
    </style>


<body>
    
    <div class="banner">
        <a href="#">
            <img src="./images/1.jpg" alt="图片">
        </a>

        <div class="pre"></div>
        <div class="next"></div>

        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    </div>

    <script>
        let images = ['1.jpg','2.jpg','3.jpg','4.jpg']
        let pre = document.querySelector('.pre');
        let next = document.querySelector('.next');
        let lis = document.querySelectorAll('li');

        let image = document.querySelector('img');

        //让当前节点的li背景保持选中
        let selectNode = function(i){
            for(let j = 0;j < images.length; j++){
                    lis[j].className = '';
                }

                lis[i].className = 'active';
                image.src = './images/' + images[i];
        }

        let count = 0;
        pre.onclick = ()=>{
            count--;
            if(count < 0){
                count = 3;
            }
            selectNode(count);
        }

        next.onclick = ()=>{
            count++;
            if(count > images.length-1){
                count = 0;
            }
            selectNode(count);
            
        }

        //自动切换图片,绑定定时器
        let func = function(){
            count++;
            if(count > images.length -1){
                count = 0;
            }
            selectNode(count);
        }
        let timer = setInterval(func,2000)
        
        //鼠标入banner停止定时器
        let banner = document.querySelector('.banner');
        banner.onmouseover = function(){
            clearInterval(timer);
        }
        //鼠标出banner开启定时器
        banner.onmouseout = function(){
            timer = setInterval(func,1000)
        }

        //给小点绑定单击相应事件
        
        for(let i = 0 ;i < lis.length; i++){
            lis[i].onclick = function(){ 
                selectNode(i);
                count = i;//注意
            }
        }


    </script>
</body>
</html>